<template>
  <h2>购物车列表</h2>
  <ul>
    <li v-for="item in cratStore.cartProoducts" :key="item.id">
      {{ item.title }}----{{ item.price }} x 数量{{ item.quantity }}
      <br />
      <el-button
        type="primary"
        :icon="Delete"
        @click="cratStore.delCartToProduct(item)"
        >删除</el-button
      >
      <el-button type="primary" @click="cratStore.subProductToCart(item)"
        >-</el-button
      >
    </li>
    <li>商品总价：{{ cratStore.totalPrice }}</li>
    <li>
      <el-button
        type="primary"
        @click="cratStore.checkout"
        v-show="cratStore.cartProoducts.length"
        >结算</el-button
      >
    </li>
    <p v-show="cratStore.checkoutSatus">结算{{ cratStore.checkoutSatus }}</p>
  </ul>
</template>
<script lang="ts" setup>
import { useProductStore } from "@/store/product";
import { useCartStore } from "@/store/cart";
import { IProduct } from "@/api/shop";
import { Delete } from "@element-plus/icons-vue";
const cratStore = useCartStore();
const productStore = useProductStore();
</script>
<style lang="less" scoped>
ul {
  display: flex;
  flex-direction: column;
  padding-left: 20px;
  li {
    line-height: 30px;
    font-size: 18px;
  }
}
</style>
